<template>
    <el-dialog
      title="美食分组"
      :visible.sync="localVisible"
      width="600px"
      @close="handleClose"
    >
      <div>
        <!-- 选择器 -->
        <el-select
          v-model="currentSelectedGroup"
          placeholder="选择组别"
          @change="handleGroupChange"
          style="width: calc(100% - 120px); margin-bottom: 20px;"
        >
          <el-option
            v-for="group in foodGroups"
            :key="group.name"
            :label="group.name"
            :value="group.name"
          />
        </el-select>
        <el-button type="primary" @click="addGroup" style="width: 100px; margin-left: 10px;">
          新建组
        </el-button>
  
        <!-- 搜索框 -->
        <el-input
          v-model="searchQuery"
          placeholder="搜索食物"
          clearable
          @input="handleSearch"
          style="width: 100%; margin-bottom: 20px;"
        />
  
        <!-- 当前组的食物列表 -->
        <div class="food-list">
          <h4>
            当前组别：{{ currentSelectedGroup }}
            <el-button
              type="danger"
              size="mini"
              @click="removeGroup"
              v-if="currentSelectedGroup !== '默认组'"
              style="margin-left: 10px;"
            >
              删除组
            </el-button>
          </h4>
          <el-tag
            v-for="(food, index) in filteredFoods"
            :key="index"
            closable
            @close="removeFood(food)"
            style="margin: 5px;"
          >
            {{ food }}
          </el-tag>
        </div>
  
        <!-- 添加食物 -->
        <div style="margin-top: 20px;">
          <el-input
            v-model="newFood"
            placeholder="添加新食物"
            clearable
            @keyup.enter="addFood"
            style="width: calc(100% - 110px); display: inline-block;"
          />
          <el-button type="primary" @click="addFood" style="width: 100px;">添加</el-button>
        </div>
      </div>
    </el-dialog>
  </template>
  
  <script>
  import { mapState, mapMutations } from "vuex";
  
  export default {
    name: "FoodCustomizeDialog",
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
    },
    data() {
      return {
        localVisible: this.visible, // 本地控制对话框显示状态
        searchQuery: "",
        newFood: "",
      };
    },
    computed: {
      ...mapState(["foodGroups", "selectedGroup"]),
      currentSelectedGroup: {
        get() {
          return this.selectedGroup;
        },
        set(value) {
          this.updateSelectedGroup(value);
        },
      },
      currentGroupFoods() {
        const group = this.foodGroups.find((g) => g.name === this.currentSelectedGroup);
        return group ? group.foods : [];
      },
      filteredFoods() {
        if (!this.searchQuery) return this.currentGroupFoods;
        return this.currentGroupFoods.filter((food) =>
          food.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
      },
    },
    watch: {
      visible(val) {
        this.localVisible = val;
      },
      localVisible(val) {
        this.$emit("update:visible", val);
      },
    },
    methods: {
      ...mapMutations([
        "createGroup",
        "deleteGroup",
        "addFoodToGroup",
        "deleteFoodFromGroup",
        "updateSelectedGroup",
      ]),
      handleGroupChange() {
        this.searchQuery = ""; // 切换组别时清空搜索
      },
      handleSearch() {
        // 搜索逻辑已经在 computed 中实现
      },
      addGroup() {
        this.$prompt("请输入新组名", "新建组", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            if (value.trim()) {
              this.createGroup(value.trim());
              this.updateSelectedGroup(value.trim()); // 切换到新建的组
            }
          })
          .catch((err) => {console.log(err)});
      },
      removeGroup() {
        this.$confirm("确定要删除当前组吗？", "删除组", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.deleteGroup(this.currentSelectedGroup);
          })
          .catch(() => {});
      },
      addFood() {
        if (this.newFood.trim()) {
          this.addFoodToGroup({
            groupName: this.currentSelectedGroup,
            food: this.newFood.trim(),
          });
          this.newFood = "";
        }
      },
      removeFood(food) {
        this.deleteFoodFromGroup({
          groupName: this.currentSelectedGroup,
          food,
        });
      },
      handleClose(){
        this.localVisible=false
      }
    },
  };
  </script>
  
  <style scoped>
  </style>
  